@import '../../../theme/default.less';

.hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}

.add-icon {
  font-size: 20px;
  margin-right: 5px;
}

.zent-design-component-image-ad-editor {
  .zent-design-editor__control-group-label {
    width: 5em;
    text-align: left;
  }

  &__image-entry {
    background: @theme-stroke-10;
    border: 1px solid @theme-stroke-7;
    padding: 10px;
    display: flex;

    &-image-container {
      width: 120px;
      height: 120px;
      flex: 0 0 120px;
      border: 1px solid @theme-stroke-7;
      margin-right: 10px;
      position: relative;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
      }
    }

    &-image-upload {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;

      input {
        &:extend(.hidden-input);
      }

      &--has-image {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: @theme-mask-black-6;
        color: @theme-stroke-10;
      }

      &--no-image {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        b {
          &:extend(.add-icon);
        }
      }
    }

    &-controls {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &-image-control {
      display: flex;
      align-items: center;

      &:first-child {
        margin-bottom: 10px;
      }

      label {
        width: 3em;
      }

      .zent-input-wrapper {
        flex: 1;
      }
    }

    &-error {
      color: @theme-error-2;
      position: absolute;
      bottom: 15px;
      left: 30px;
    }
  }

  &__add-entry-btn {
    height: 45px;
    display: flex;
    align-items: center;
    background: @theme-stroke-10;
    margin-top: 10px;
    border: 1px solid @theme-stroke-7;
    padding-left: 10px;
    position: relative;

    input {
      &:extend(.hidden-input);
    }

    b {
      &:extend(.add-icon);

      margin-top: -2px;
    }
  }

  &__hint {
    margin-top: 10px;
    color: @theme-stroke-3;
  }

  &__entry {
    position: relative;

    &-prepend-btn,
    &-append-btn,
    &-close-btn {
      display: none;
    }

    &:hover {
      .zent-design-component-image-ad-editor__entry-close-btn,
      .zent-design-component-image-ad-editor__entry-prepend-btn,
      .zent-design-component-image-ad-editor__entry-append-btn {
        display: inline-block;
      }
    }

    &:not(:last-child) {
      margin-bottom: 15px;
    }

    &-close-btn {
      position: absolute;
      top: -6px;
      right: -6px;
      color: @theme-stroke-5;
      font-size: 18px;

      &:hover {
        color: @theme-stroke-4;
      }
    }

    &-prepend-btn,
    &-append-btn {
      background: @theme-primary-3;
      border-radius: 50%;
      color: @theme-stroke-10;
      padding: 4px;
      font-size: 10px;
      position: absolute;
    }

    &-prepend-btn:hover,
    &-append-btn:hover {
      background: @theme-primary-2;
    }

    &-prepend-btn {
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &-append-btn {
      bottom: 1px;
      left: 50%;
      transform: translate(-50%, 50%);
    }
  }
}
